import { Component } from 'react';
import storage from '../../utils/storage';
import { Switch, Route, Redirect } from 'react-router-dom';
import './index.scss';
import { message, Menu, Modal } from 'antd';
import { Link } from 'react-router-dom';
import { menus, Home, Category, Manage, User, Role, Bar, Line, Pie } from './utils';

export default class Index extends Component {
  state = {
    signoutModalVisible: false,
  };
  componentDidMount() {
    const user = storage.getUser();
    if (!user) {
      message.warning('未登录');
      this.props.history.replace('/login');
    }
  }
  render() {
    const { signoutModalVisible } = this.state;
    return (
      <div className='Index'>
        <div className='menu'>
          <div className='title'>后台管理系统</div>
          {this.renderMenus()}
        </div>
        <div className='right-wrapper'>
          <div className='header'>
            <span>欢迎：{storage.getUser()}</span>
            <span className='signout' onClick={() => this.setState({ signoutModalVisible: true })}>
              退出
            </span>
            <Modal
              title='温馨提示'
              centered
              closable={false}
              visible={signoutModalVisible}
              onOk={this.signout}
              onCancel={() => this.setState({ signoutModalVisible: false })}
              width={300}
            >
              <p>确认退出？</p>
            </Modal>
          </div>
          <div className='content'>
            <Switch>
              <Route exact path='/home' component={Home} />
              <Route exact path='/product/category' component={Category} />
              <Route exact path='/product/manage' component={Manage} />
              <Route exact path='/user' component={User} />
              <Route exact path='/role' component={Role} />
              <Route exact path='/charts/bar' component={Bar} />
              <Route exact path='/charts/Line' component={Line} />
              <Route exact path='/charts/Pie' component={Pie} />
              {/* <Redirect to='/home' /> */}
            </Switch>
          </div>
        </div>
      </div>
    );
  }
  renderMenus() {
    const { pathname } = this.props.location;
    const defaultOpenKeys = [`/${pathname.split('/')[1]}`];
    return (
      <Menu selectedKeys={[pathname]} mode='inline' theme='dark' defaultOpenKeys={defaultOpenKeys}>
        {menus.map(item => {
          if (item.children && item.children.length) {
            return (
              <Menu.SubMenu key={item.subMenuKey} title={item.title} icon={item.icon}>
                {item.children.map(item2 => (
                  <Menu.Item key={item2.url} icon={item2.icon}>
                    <Link to={item2.url}>{item2.title}</Link>
                  </Menu.Item>
                ))}
              </Menu.SubMenu>
            );
          } else {
            return (
              <Menu.Item key={item.url} icon={item.icon}>
                <Link to={item.url}>{item.title}</Link>
              </Menu.Item>
            );
          }
        })}
      </Menu>
    );
  }
  signout = () => {
    storage.removeUser();
    this.setState({ signoutModalVisible: false });
    this.props.history.replace('/login');
  };
}
